<template>
    <div class="sidebar">
        <div class="advisory">
            <div class="img">
                <img src="~/static/image/kf.png" alt="">
            </div>
            <div class="title" id="LR_User_Icon0">咨询客服</div>
        </div>
        <ul>
            <li @click="door_to_door_ruler=true">
                <div class="img">
                    <img src="~/static/image/ico/sidebar1.png" alt="">
                </div>
                <div class="title">预约量尺</div>
            </li>
            <li @click="bargaining_show=true">
                <div class="img">
                    <img src="~/static/image/ico/sidebar2.png" alt="">
                </div>
                <div class="title">砍价服务</div>
            </li>
            <li @click="ToPage('/business/applets')">
                <div class="img">
                    <img src="~/static/image/ico/sidebar3.png" alt="">
                </div>
                <div class="title">小程序查看</div>
            </li>
            <li @click="goTop">
                <div class="img">
                    <img src="~/static/image/ico/sidebar4.png" alt="">
                </div>
                <div class="title">回到顶部</div>
            </li>
        </ul>
        <!-- 砍价服务 -->
		<BargainingService :is_show="bargaining_show" @onClose="onClose_bargaining" />
        <!-- 上门尺量弹窗 -->
		<DoorToDoorRuler :is_show="door_to_door_ruler" @onClose="onCloseRuler"/>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import DoorToDoorRuler from "~/components/DoorToDoor_ruler.vue"
import BargainingService from "~/components/Bargaining_service.vue"
export default {
    components: {
		DoorToDoorRuler,
        BargainingService
	},
    data(){
        return{
            door_to_door_ruler:false,//是否展示上门尺量弹窗
            bargaining_show:false,//是否展示砍价申请弹窗
        }
    },
    created(){
        
    },
    computed:{
		...mapState(['address'])
	},
    mounted(){
        this.$nextTick(()=>{
            if(typeof(LiveReceptionCode_isonline)!='undefined'){
	            if(LiveReceptionCode_isonline){
                    LR_GetObj('LR_User_Icon0').innerHTML='<a '+LiveReceptionCode_BuildChatWin()+'>在线咨询</a>';
                }else{
                    LR_GetObj('LR_User_Icon0').innerHTML='<a '+LiveReceptionCode_BuildChatWin()+'>点击留言</a>';
                }
            }
        })
    },
    methods:{
        // 关闭砍价服务弹窗
		onClose_bargaining(e){
			console.log('关闭砍价服务弹窗----',this.bargaining_show)
			this.bargaining_show = false
			
		},
        onCloseRuler(){
			this.door_to_door_ruler = false
		},
        goTop() {
            document.documentElement.scrollTop-=100;
            if (document.documentElement.scrollTop>0) {
                var c=setTimeout(()=>this.goTop(100),16);
            }else {
                clearTimeout(c);
            }
        },
        ToPage(url,data){
            this.$router.push({path:url})
        },
    }
}
</script>
<style scoped>
    .sidebar{
        position: fixed;
        right: 0;
        top: 35vh;
        z-index: 10000;
    }
    .sidebar .advisory .img,.sidebar .advisory .img img{
        width: 43px;
        height: 54px;
        margin: 0 auto;
    }
    .sidebar .advisory .title{
        width: 80px;
        height: 38px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        border-radius: 10px 0px 0px 10px;
        text-align: center;
        line-height: 38px;
    }
    .sidebar .advisory .title>>>a{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 38px;
    }
    .sidebar ul{
        width: 80px;
        height: 306px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        border-radius: 10px 0px 0px 10px;
        margin-top: 10px;
    }
    .sidebar ul li{
        text-align: center;
        padding: 13px 0 15px 0;
        font-size: 0;
        cursor: pointer;
    }
    .sidebar ul li .img,.sidebar ul li .img img{
        width: 26px;
        height: 26px;
        margin: 0 auto;
    }
    .sidebar ul li .title{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }
</style>
